<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span>
                {{$t('problemtype')}}
                <el-select v-model="selFaqForm.problemClassification" :placeholder="$t('plsset')" size="mini">
                    <el-option :label="'-' + $t('plsset') + '-'" :value="null"></el-option>
                    <el-option :label="$t('Idauth')" value="Identity authentication"></el-option>
                    <el-option :label="$t('trapayment')" value="Transaction payment"></el-option>
                    <el-option :label="$t('refundoper')" value="Refund operation"></el-option>
                    <el-option :label="$t('accrelated')" value="Account related"></el-option>
                </el-select>
            </span>
            <span>
                {{$t('question')}}
                <el-input v-model.trim="selFaqForm.problemContent" :placeholder="$t('plsipt')" size="mini"></el-input>
            </span>
            <el-button type="primary" @click="seachFaqlist" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            <el-button type="warning" @click="showAddFaq" size="mini" v-preventReClick>{{$t('add')}}</el-button>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="faqTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="problemClassification" width="180" :label="$t('typ')">
                </el-table-column>
                <el-table-column prop="problemContent" :label="$t('question')" width="388">
                </el-table-column>
                <el-table-column prop="problemAnswer" :label="$t('answer')" width="546">
                </el-table-column>
                <el-table-column prop="problemAttentionNum" :label="$t('proatttimes')" width="170">
                </el-table-column>
                <el-table-column prop="gmtCreate" :label="$t('creatime')" width="168">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="120" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showEditFaq(scope.row)">{{$t('mdfy')}}</el-link>
                        <el-link type="primary" @click="showDelFaq(scope.row.id)">{{$t('dlte')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="selFaqForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="selFaqForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :pager-count="5">
            </el-pagination>
        </el-card>
        <!-- 添加弹框 -->
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="30%" @close="addDialogVisibleClosed(addfaqForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="addfaqForm" :rules="addFaqRul" :model="addfaqForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('question')" prop="problemContent">
                    <el-input v-model="addfaqForm.problemContent" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('answer')" prop="problemAnswer">
                    <el-input type="textarea" v-model="addfaqForm.problemAnswer" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('problemtype')" prop="problemClassification">
                    <el-select v-model="addfaqForm.problemClassification" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('Idauth')" value="Identity authentication"></el-option>
                        <el-option :label="$t('trapayment')" value="Transaction payment"></el-option>
                        <el-option :label="$t('refundoper')" value="Refund operation"></el-option>
                        <el-option :label="$t('accrelated')" value="Account related"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addFaqup(addfaqForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="addDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- 修改弹框 -->
        <el-dialog :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editfaqForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="editfaqForm" :rules="editProRul" :model="editfaqForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('question')" prop="problemContent">
                    <el-input v-model="editfaqForm.problemContent" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('answer')" prop="problemAnswer">
                    <el-input type="textarea" v-model="editfaqForm.problemAnswer" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('problemtype')" prop="problemClassification">
                    <el-select v-model="editfaqForm.problemClassification" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('Idauth')" value="Identity authentication"></el-option>
                        <el-option :label="$t('trapayment')" value="Transaction payment"></el-option>
                        <el-option :label="$t('refundoper')" value="Refund operation"></el-option>
                        <el-option :label="$t('accrelated')" value="Account related"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editFaqup(editfaqForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
        <!-- 删除区 -->
        <el-dialog :title="$t('dlte')" :visible.sync="delDialogVisible" width="30%" :modal-append-to-body="false">
            {{$t('whetormthepro')}}
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="delFaqup" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="delDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getsysfaqlist,
    addsysfaq,
    removesysfaq,
    editsysfaq
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            rmid: 0,
            total: 0,
            isOk: false,
            addDialogVisible: false,
            delDialogVisible: false,
            editDialogVisible: false,
            selFaqForm: {
                problemClassification: '',
                problemContent: '',
                pageSize: 10,
                pageNum: 1
            },
            faqTab: [],
            addfaqForm: {
                problemContent: '',
                problemAnswer: '',
                problemClassification: ''
            },
            addFaqRul: {
                problemContent: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                problemAnswer: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                problemClassification: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            },
            editfaqForm: {
                id: 0,
                problemContent: '',
                problemAnswer: '',
                problemClassification: ''
            },
            editProRul: {
                problemContent: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                problemAnswer: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                problemClassification: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        seachFaqlist () {
            this.selFaqForm.pageNum = 1
            this.getFaqList()
        },
        getFaqList () {
            getsysfaqlist(JSON.stringify(this.selFaqForm)).then(res => {
                if (res.status === 200) {
                    this.total = res.data.total - 0
                    for (let i = 0; i < res.data.list.length; i++) {
                        let item = res.data.list[i]
                        if (item.problemClassification === 'Identity authentication') item.problemClassification = this.$t('Idauth')
                        if (item.problemClassification === 'Transaction payment') item.problemClassification = this.$t('trapayment')
                        if (item.problemClassification === 'Refund operation') item.problemClassification = this.$t('refundoper')
                        if (item.problemClassification === 'Account related') item.problemClassification = this.$t('accrelated')
                    }
                    this.faqTab = res.data.list
                }
            })
        },
        handleSizeChange (newSize) {
            this.selFaqForm.pageSize = newSize
            this.getFaqList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.selFaqForm.pageNum = newNum
            this.getFaqList()
        },
        showAddFaq () {
            this.addDialogVisible = true
        },
        addFaqup (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.addfaqForm.problemContent = this.addfaqForm.problemContent.trim()
                this.addfaqForm.problemAnswer = this.addfaqForm.problemAnswer.trim()
                addsysfaq(JSON.stringify(this.addfaqForm)).then(res => {
                    if (res.data.code === '000000') {
                        if (res.data.data.status === 1) {
                            this.$message({
                                message: this.$t('funaddsuc'),
                                type: 'success'
                            })
                            this.addDialogVisible = false
                            this.getFaqList()
                        } else {
                            this.$message.error(this.$t('unfunaddsuc'))
                        }
                    }
                })
            })
        },
        showEditFaq (data) {
            this.editfaqForm.id = data.id - 0
            this.editfaqForm.problemContent = data.problemContent
            this.editfaqForm.problemAnswer = data.problemAnswer
            this.editfaqForm.problemClassification = data.problemClassification
            this.editDialogVisible = true
        },
        editFaqup (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.editfaqForm.problemContent = this.editfaqForm.problemContent.trim()
                this.editfaqForm.problemAnswer = this.editfaqForm.problemAnswer.trim()
                if (this.editfaqForm.problemClassification === this.$t('Idauth')) this.editfaqForm.problemClassification = 'Identity authentication'
                if (this.editfaqForm.problemClassification === this.$t('trapayment')) this.editfaqForm.problemClassification = 'Transaction payment'
                if (this.editfaqForm.problemClassification === this.$t('refundoper')) this.editfaqForm.problemClassification = 'Refund operation'
                if (this.editfaqForm.problemClassification === this.$t('accrelated')) this.editfaqForm.problemClassification = 'Account related'
                editsysfaq(JSON.stringify(this.editfaqForm)).then(res => {
                    if (res.data.code === '000000') {
                        if (res.data.data.status === 1) {
                            this.$message({
                                message: this.$t('modfunsuc'),
                                type: 'success'
                            })
                            this.editDialogVisible = false
                            this.getFaqList()
                        } else {
                            this.$message.error(this.$t('modfununsuc'))
                        }
                    }
                })
            })
        },
        showDelFaq (id) {
            this.rmid = id - 0
            this.delDialogVisible = true
        },
        delFaqup () {
            removesysfaq(JSON.stringify({ id: this.rmid })).then(res => {
                if (res.data.code === '000000') {
                    if (res.data.data.status === 1) {
                        this.$message({
                            message: this.$t('dltfunsuc'),
                            type: 'success'
                        })
                        this.delDialogVisible = false
                        this.getFaqList()
                    } else {
                        this.$message.error(this.$t('deletefailed'))
                    }
                }
            })
        },
        addDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        editDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        }
    },
    mounted () {
        this.getFaqList()
    }
}
</script>

<style lang="less" scoped>
@import './faqmgmt.less';
</style>
